<template>
  <div>
    <el-col v-for="(item, index) in iconList" :key="index" :span="4" class="icon-demo-container" >
      <svg-icon :icon-class="item" class="icon-demo"/>
      <span class="icon-demo-text">{{ item }}</span>
    </el-col>
  </div>
</template>

<script>
export default {

  data() {
    return {
      iconList: []
    }
  },

  created() {
    // eslint-disable-next-line
    const req = require.context('@/icons/svg', false, /\.svg$/)
    req.keys().forEach(element => {
      if (/\.svg$/.test(element)) {
        this.iconList.push(element.replace(/.+\//, '').replace(/\.svg$/, ''))
      }
    })
  }
}
</script>

<style lang="scss" scoped>
.icon-demo-container {

  display: inline-block;
  padding: 20px 0;
  margin: 5px;
  border: 1px solid #ddd;
  border-radius: 5px;
  text-align: center;

  .icon-demo {
    font-size: 32px;
  }
  .icon-demo-text {
    display: block;
    padding: 5px 0;
  }
}

</style>
